<template>
	<view class="container">
		<view class="headerimg">
			<u-avatar :src="headerimg" size="120" @tap="chooseAvatar()"></u-avatar>
			<text>修改头像</text>
		</view>
		<view class="username">
			<!-- <text>昵称</text>
			<input type="text" v-model="username" :style="{width:username.length*28+15+'rpx'}" placeholder="请输入昵称"/> -->
			<u-cell-group :border="false">
				<u-cell-item title="昵称" :value="username" :arrow="false" :border-bottom="false" @tap="navigateToupname()">
					<u-icon slot="right-icon" name="/static/icon_zy_189.png" size="18"></u-icon>
				</u-cell-item>
			</u-cell-group>
		</view>
		<view class="useradd">
			<u-cell-group :border="false">
				<u-cell-item title="我的装修地址":arrow="false" :border-bottom="false">
					<u-icon slot="right-icon" name="/static/icon_zy_189.png" size="18"></u-icon>
				</u-cell-item>
			</u-cell-group>
		</view>
	</view>
</template>

<script>
	import {uploadImage,updateUserinfo,getUserinfo,url} from '@/apis/request.js'
	export default {
		data() {
			return {
			   username:'',
			   headerimg:'',
			   nameInputdisabled:true, 
			   token:''
			}
		},
		
		onLoad() {
			
			
		},
		onShow() {
			this.token=uni.getStorageSync('userInfo').token;
			this.username=uni.getStorageSync('userInfo').name;
			
		},
		created() {
			this.headerimg=uni.getStorageSync('userInfo').headOrtrait;
			uni.$on('uAvatarCropper', path => {
				console.log(path);
				this.headerimg = path;
				uni.uploadFile({
				    url: uploadImage,
					    filePath: path,
						name: 'file',
						complete: (res) => {
						    const  upload_img=JSON.parse(res.data);
							uni.showToast({
								title:'上传成功'
							});
							console.log(url);
							this.requestUpdateInfo(`${url}${upload_img.data.src}`);
						}
					});
				})
		},
		methods: {
			chooseAvatar(){
				this.$u.route({
					url: '/uview-ui/components/u-avatar-cropper/u-avatar-cropper',
					params: {
						destWidth: 300,
						rectWidth: 200,
						fileType: 'jpg',
					}
				});
			},
			editUsername(){
				this.nameInputdisabled=false;
			},
			requestUpdateInfo(imgsrc){
				uni.showLoading({
					title:'正在更新'
				});
				this.$http({
					url:updateUserinfo,
					method:"POST",
					data:{
						headOrtrait:imgsrc
					},
					header:{
						'Token':this.token,
						'content-type':'application/x-www-form-urlencoded'
					}
				})
				.then(res=>{
					// console.log(res);
					if(res[1].data.status=='200'){
						this.requestGetUserinfo()
					}
				})
				.catch(err=>{
					console.log(err);
				});
			},
			requestGetUserinfo(){
				this.$http({
					url:getUserinfo,
					method:"GET",
					data:{},
					header:{
						'Token':this.token
					}
				})
				.then(res=>{
					// console.log(res);
					if(res[1].data.status=='200'){
						uni.setStorageSync('userInfo',res[1].data.data);
						uni.hideLoading();
						uni.showToast({
							title:'更新完成'
						});
					}
				})
				.catch(err=>{
					console.log(err);
				});
			},
			navigateToupname(){
				uni.navigateTo({
					url:'upname/upname'
				})
			}
		}
	}
</script>

<style lang="scss">
     page{
		 width: 100%;
		 height: 100%;
	 }
	 .container{
		 width: 100%;
		 height: 100%;
		 .headerimg{
			 width: 680rpx;
			 height: 140rpx;
			 margin: auto;
			 display: flex;
			 align-items: center;
			 margin-top:50rpx;
			 text{margin-left: 50rpx;color:#888;font-size: 26rpx;}
		 }
		 .username{
			 width: 100%;
			 border-bottom: 1rpx solid #F1F1F1;
			 margin: auto;
			 margin-top: 30rpx;
		 }
		 .useradd{
			 width: 100%;
			 margin: auto;
			 border-bottom: 1rpx solid #F1F1F1;
		 }
	 }
</style>
